<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        v-loading="loading"
        :gutter="15"
        class="main"
        :style="{ margin: '0 16px', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <div class="info-card">
                <el-image
                  class="info-image"
                  :src="define.comUrl + dataForm.cover.url"
                  :preview-src-list="[...(define.comUrl + dataForm.cover.url)]"
                  fit="cover"
                ></el-image>
                <div class="info-content">
                  <h2 class="info-title">{{ dataForm.name }}</h2>
                  <p class="info-validity">
                    {{ dataForm.expiredType | dynamicText(expiredTypeOptions) }}
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="颁发记录" name="first"> </el-tab-pane>
                <el-tab-pane label="撤销记录" name="second"> </el-tab-pane>
              </el-tabs>
              <div class="jsbos_search">
                <el-form @submit.native.prevent label-width="80px">
                  <el-form-item label="证书来源">
                    <el-select
                      v-model="query.resourceType"
                      placeholder="请选择"
                      style="width: 100%"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in resourceTypeOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证书名称">
                    <el-select
                      v-model="query.name"
                      placeholder="请选择"
                      style="width: 100%"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in nameOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.enCode"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证书类别">
                    <el-select
                      v-model="query.category"
                      placeholder="请选择"
                      style="width: 100%"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in categoryOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.enCode"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证书等级">
                    <el-select
                      v-model="query.grade"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in gradeOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.enCode"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="发证单位">
                    <el-input
                      v-model="query.certBy"
                      placeholder="请输入"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="证书所属人">
                    <user-select
                      v-model="query.certUserId"
                      placeholder="请选择"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-date-picker
                      v-model="query.creatorTime"
                      value-format="timestamp"
                      format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      type="daterange"
                    />
                  </el-form-item>
                  <el-form-item label="过期日期">
                    <el-date-picker
                      v-model="query.expiredDate"
                      type="daterange"
                      value-format="timestamp"
                      format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="search()"
                      >查询</el-button
                    >
                    <el-button icon="el-icon-refresh-right" @click="reset()"
                      >重置</el-button
                    >
                    <el-button
                      type="text"
                      icon="el-icon-arrow-down"
                      class="open_search"
                      @click="jsbos.openAndClose('open')"
                    >
                      展开
                    </el-button>
                    <el-button
                      type="text"
                      icon="el-icon-arrow-up"
                      class="close_search"
                      @click="jsbos.openAndClose('close')"
                    >
                      收起
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
              <jsbos-table
                v-loading="listLoading"
                :data="list"
                ref="jsbosTableRef"
              >
                <el-table-column
                  label="证书来源"
                  width="100"
                  prop="resourceType"
                  algin="left"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.resourceType | dynamicText(resourceTypeOptions)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="证书名称"
                  width="0"
                  align="left"
                />
                <el-table-column
                  prop="code"
                  label="证书编号"
                  width="200"
                  align="left"
                />
                <el-table-column
                  prop="category"
                  label="证书类别"
                  width="100"
                  align="left"
                />
                <el-table-column
                  prop="grade"
                  label="证书等级"
                  width="100"
                  align="left"
                />
                <el-table-column
                  prop="certUserId"
                  label="证书所属人"
                  width="100"
                  align="left"
                />
                <el-table-column
                  prop="certBy"
                  label="发证单位"
                  width="250"
                  align="left"
                />

                <el-table-column
                  label="有效期"
                  width="100"
                  prop="expiredType"
                  algin="left"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.expiredType | dynamicText(expiredTypeOptions)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="expiredDate"
                  label="过期日期"
                  width="120"
                  align="left"
                />
                <el-table-column
                  prop="reviewDate"
                  label="复审日期"
                  width="120"
                  align="left"
                />
                <el-table-column
                  prop="creatorUserId"
                  label="创建用户"
                  width="100"
                  align="left"
                />
                <el-table-column
                  prop="creatorTime"
                  label="创建时间"
                  width="150"
                  align="left"
                />
                <el-table-column
                  label="操作"
                  fixed="right"
                  v-if="query.enabledMark == 1"
                  width="150"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      class="jsbos-table-delBtn"
                      @click="handleRevoke(scope.row.id)"
                      >撤销
                    </el-button>
                  </template>
                </el-table-column>
              </jsbos-table>
              <pagination
                :total="total"
                :page.sync="listQuery.currentPage"
                :limit.sync="listQuery.pageSize"
                @pagination="initCertUserData"
              />
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import PrintBrowse from "@/components/print-browse/index.vue";
import jsbos from "@/utils/jsbos";

export default {
  components: { PrintBrowse },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      activeName: "first",
      printId: "",
      dataForm: {
        id: "",
        name: "",
        categoryId: "",
        expiredType: "1",
        expiredDay: 1,
        description: "",
        fieldConfig: "", //字段配置存储字段
        enabledMark: "1",
        creatorUserId: "",
        creatorTime: "",
        cover: [],
      },
      enabledMarkOptions: [
        { fullName: "待发布", id: "0" },
        { fullName: "已发布", id: "1" },
      ],
      resourceTypeOptions: [
        { fullName: "课程", id: "10" },
        { fullName: "考试", id: "20" },
        {
          fullName: "专题",
          id: "30",
        },
        { fullName: "项目管理", id: "40" },
        { fullName: "新人培训", id: "50" },
        {
          fullName: "学习地图",
          id: "60",
        },
        { fullName: "在线颁发", id: "80" },
        { fullName: "资质证书", id: "90" },
      ],
      categoryOptions: [],
      categoryProps: {
        label: "fullName",
        value: "enCode",
      },
      gradeOptions: [],
      gradeProps: {
        label: "fullName",
        value: "enCode",
      },
      expiredTypeOptions: [
        { fullName: "永久有效", id: "1" },
        { fullName: "有效周期", id: "0" },
      ],
      expiredTypeProps: {
        label: "fullName",
        value: "id",
      },
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      query: {
        resourceType: undefined,
        name: undefined,
        category: undefined,
        grade: undefined,
        certBy: undefined,
        certId: undefined,
        certUserId: undefined,
        creatorTime: undefined,
        enabledMark: 1,
        expiredDate: undefined,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getNameOptions();
    this.getCategoryOptions();
    this.getGradeOptions();
  },
  methods: {
    getNameOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "CertName",
        })
        .then((res) => {
          this.nameOptions = res;
        });
    },
    getCategoryOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "CertificateCategory",
        })
        .then((res) => {
          this.categoryOptions = res;
        });
    },
    getGradeOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "CertGrade",
        })
        .then((res) => {
          this.gradeOptions = res;
        });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      };
      this.initCertUserData();
    },
    reset() {
      for (let key in this.query) {
        if (key != "certId") this.query[key] = undefined;
      }
      this.search();
    },
    handleTabClick(tab, event) {
      if (tab.name == "first") {
        this.query.enabledMark = 1;
        this.initData();
      }
      if (tab.name == "second") {
        this.query.enabledMark = 0;
        this.initData();
      }
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.cover = _dataAll.cover ? JSON.parse(_dataAll.cover) : [];
      this.dataForm = _dataAll;
    },
    goBack() {
      this.$emit("refresh");
    },
    handleRevoke(id) {
      this.$confirm("确定要撤销吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: `/api/course/TemsCertUser/revoke/${id}`,
            method: "DELETE",
          }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initCertUserData();
              },
            });
          });
        })
        .catch(() => {});
    },
    initCertUserData() {
      this.listLoading = true;
      this.query.certId = this.dataForm.id;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/course/TemsCertUser/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;

      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsCert/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
          this.initCertUserData();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.info-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: row;

  .info-content {
    display: flex;
    flex-direction: column;
  }

  .info-image {
    max-width: 200px;
    height: auto;
  }

  .info-title {
    font-size: 14px;
    margin: 10px 0;
  }

  .info-validity {
    color: #777;
  }
}
</style>
